import { useState } from "react";
import './index.css'
const { electron: { remote: { dialog } } } = window
const Input = (props) => {
    const { onClick, inputTip } = props
    const [tip, setTip] = useState('')
    const tipContent = () => {
        if (tip) {
            return tip
        } else {
            return inputTip || "未指定目标数据库"
        }
    }
    const onSelect = () => {
        dialog.showOpenDialog({
            title: "请选择将要监控的数据库文件",
            buttonLabel: "确认",
            properties: ['openFile']
        }).then(result => {
            const { filePaths, canceled } = result
            if (!canceled) {
                setTip(filePaths[0])
            }
        }).catch(err => {
            console.log(err)
        })
    }
    return <>
        <div className="input-container">
            <div className="input-tip">
                {
                    tipContent()
                }</div>
            <div className="input-button-select" onClick={onSelect}>
                选择
            </div>
            <div className="input-button-confirm" onClick={onClick.bind(this, tip || inputTip)}>
                确认
            </div>
        </div>
    </>
}
export default Input;